<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Switcher</title>
  <!-- Inline PWA manifest via Blob URL -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const manifest = {
        name: 'Color Switcher',
        short_name: 'ColorSwitch',
        start_url: '.',
        display: 'standalone',
        background_color: '#ffffff',
        theme_color: '#ffffff',
        icons: [
          { src: '...', sizes: '192x192', type: 'image/png' },
          { src: '...', sizes: '512x512', type: 'image/png' }
        ]
      };
      const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
      const manifestURL = URL.createObjectURL(blob);
      const link = document.createElement('link');
      link.rel = 'manifest';
      link.href = manifestURL;
      document.head.appendChild(link);
    });
  </script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-color: #ffffff; }
    .controls { width: 100%; text-align: center; padding: 16px; }
    .controls input { width: 40px; height: 40px; border: none; padding: 0; cursor: pointer; }
    .button-list { display: flex; flex-direction: column; align-items: center; width: 100%; flex: 1; overflow-y: auto; gap: 12px; padding: 0 16px 16px; }
    .btn { width: 100%; max-width: 300px; padding: 12px; border: none; border-radius: 8px; color: #fff; font-size: 16px; cursor: pointer; }
    .btn:nth-child(odd) { background-color: #e74c3c; }
    .btn:nth-child(even) { background-color: #3498db; }
  </style>
</head>
<body>
<button id="installBtn" style="position:fixed; top:16px; right:16px; z-index:999;">
  安装到主屏
</button>

  <div class="controls">
    <label for="bgColorPicker">背景色:</label>
    <input type="color" id="bgColorPicker" value="#ffffff">
  </div>
  <div class="button-list" id="buttonList"></div>
  <script>
    // Generate 20 buttons
    const buttonList = document.getElementById('buttonList');
    for (let i = 1; i <= 20; i++) {
      const btn = document.createElement('button');
      btn.className = 'btn';
      btn.textContent = `按钮 ${i}`;
      buttonList.appendChild(btn);
    }
    // Switch background color
    document.getElementById('bgColorPicker').addEventListener('input', e => {
      document.body.style.backgroundColor = e.target.value;
    });




let deferredPrompt;
const installBtn = document.getElementById('installBtn');

window.addEventListener('beforeinstallprompt', (e) => {
  // 阻止自动弹出
  e.preventDefault();
  deferredPrompt = e;
  // 显示安装按钮
  installBtn.style.display = 'block';
});

installBtn.addEventListener('click', async () => {
  if (!deferredPrompt) return;
  // 弹出安装对话框
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  // 根据用户选择隐藏按钮
  if (outcome === 'accepted') {
    installBtn.style.display = 'none';
  }
  deferredPrompt = null;
});

  </script>
</body>
</html>
